<template>
  <div class="login-wrapper">
    <div class="login-box view-box">
      <div class="box-title">请完成注册绑定</div>
      <div class="main-ways">

        <el-form v-if="status === -1">
          <el-form-item label="姓名（必填）">
            <el-input placeholder="姓名" v-model="info.nickname" class="input-with-select">
            </el-input>
          </el-form-item>
          <el-form-item label="身份证号（必填）">
            <el-input placeholder="身份证号" v-model="info.identity" class="input-with-select">
            </el-input>
          </el-form-item>
          <el-form-item label="密码（必填）">
            <el-input v-model="info.password" show-password placeholder="密码">
            </el-input>
          </el-form-item>
          <el-form-item label="再次输入密码（必填）">
            <el-input v-model="repeatPassword" show-password placeholder="密码">
            </el-input>
          </el-form-item>
          <div class="primary-btn" @click="bindBasicInfo">绑定</div>
        </el-form>

        <el-form v-if="status === -2">
          <el-form-item label="姓名（必填）">
            <el-input placeholder="姓名" v-model="info.nickname">
            </el-input>
          </el-form-item>
          <el-form-item label="身份证号（必填）">
            <el-input placeholder="身份证号" v-model="info.identity" class="input-with-select">
            </el-input>
          </el-form-item>
          <el-form-item label="密码（必填）">
            <el-input v-model="info.password" show-password placeholder="密码">
            </el-input>
          </el-form-item>
          <el-form-item label="再次输入（必填）">
            <el-input v-model="repeatPassword" show-password placeholder="密码">
            </el-input>
          </el-form-item>

          <el-form-item label="选择协会">
            <el-select v-model="info.businessCode" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>



<!--          <el-form-item label="协会邀请码">-->
<!--            <el-input v-model="info.businessCode" placeholder="邀请码">-->
<!--            </el-input>-->
<!--          </el-form-item>-->
          <div class="primary-btn" @click="bindBasicInfo">绑定</div>
        </el-form>

      </div>
    </div>
  </div>
</template>

<script>
import constants from '../../utils/constants';
export default {
  name: 'register',
  data() {
    return {
      status:0,
      info:{},
      repeatPassword:"",
      options:[
        {
          label:"河南省工程勘察设计行业协会",
          value:"acmu6x"
        }
      ]
    };
  },
  mounted() {
    this.status = this.$route.query.status
  },
  methods: {
    bindBasicInfo(){
      console.log(this.info.businessCode)
      if(this.info.nickname == null){
        this.$message.error('请输入姓名')
        return
      }
      if(this.info.identity == null){
        this.$message.error('请输入身份证号')
        return
      }
      if(this.info.password == null){
        this.$message.error('请输入密码')
        return
      }
      if(this.info.password.length < 8 || this.info.password.length > 13){
        this.$message.error('密码格式错误，请输入8到13位的密码！')
        return
      }
      if(this.info.password !== this.repeatPassword){
        this.$message.error('两次输入密码不一致')
        return;
      }
      this.$api.bindBasicInfo(this.info).then((res)=>{
        let userInfo = res.data.data
        window.localStorage.setItem(constants.ACCESS_TOKEN,JSON.stringify(userInfo))
        this.$router.push({
          name: "home",
        });
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.login-wrapper {
  overflow: hidden;
  min-height: 70vh;
}
.el-form-item {
  margin-bottom: 15px;
}
.login-box {
  width: 360px;
  height: 580px;
  padding: 20px 100px;
  margin: 50px auto 0;
  background: #fff;
  border-radius: 10px;

}
.box-title {
  font-size: 28px;
  font-weight: bolder;
  margin: 20px 0;
}
.main-ways {
  display: flex;
  flex-direction: column;

  .get-sms {
    cursor: pointer;
  }
  .wait-sms {
    cursor: wait;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 20px 0;
    > div {
      cursor: pointer;
      transition: .3s;
      &:hover {
        color: #8EB9FF;
        transition: .3s;
      }
    }
  }
  .primary-btn {
    margin-top: 30px;
    width: inherit;
  }
  .notice {
    font-size: 12px;
    color: #7a7a7a;
  }
}
.other-ways {
  margin-top: 50px;
  text-align: center;
  font-size: 14px;

  .thirds {
    margin-top: 10px;
    justify-content: center;
    > div {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #eaeaea;
      margin: 10px;
    }
  }
}
</style>

